<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1, user-scalable=no"
        />
        <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
        <style>
            .loading {
                width: 100%;
                height: 100%;
                display: flex;
                position: fixed;
                align-items: center;
                flex-direction: column;
                justify-content: center;
            }

            .loading span {
                color: #1f2937;
                margin-top: 20px;
                font-weight: 600;
                font-size: 1.25rem;
            }

            .loading svg {
                animation: rotate 1s linear infinite;
            }

            @keyframes rotate {
                100% {
                    transform: rotate(360deg);
                }
            }
        </style>
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div class="loading">
            <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 512 512"
                fill="#6b21a8"
                width="70px"
            >
                <path
                    d="M304 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm0 416a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM48 304a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm464-48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM142.9 437A48 48 0 1 0 75 369.1 48 48 0 1 0 142.9 437zm0-294.2A48 48 0 1 0 75 75a48 48 0 1 0 67.9 67.9zM369.1 437A48 48 0 1 0 437 369.1 48 48 0 1 0 369.1 437z"
                />
            </svg>
            <span>Loading...</span>
        </div>
        <div id="root"></div>
    </body>
</html>
